<template>
  <div class="guess-container">
    <span
      class="guess-title"
      style="
        text-align: center;
        margin-bottom: 40rpx;
        font-size: 32rpx;
        color: #1aaa9b;
      "
      >猜你喜欢</span
    >
    <div class="guess-list">
      <div v-for="item in 10" :key="item">
        <navigator
          class="guess-item"
          url="/pages/index/components/detail"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <img
            style="width: 200rpx; height: 200rpx"
            src="@/static/guess/1.jpg"
            alt=""
          />
          <div class="guess-item-title">
            本作「showcase of a cake
            shop」为附有「showcase」「cake」等标签的插画。
          </div>
          <div>
            <span style="margin-left: 0; margin-right: auto">￥9999.00</span>
          </div>
        </navigator>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqGuess } from "@/api/component/getGuess";
const guessList = ref<any[]>([]);
onMounted(() => {
  getGuess();
});
const getGuess = async () => {
  // const result = await reqGuess();
  // guessList.value = result.data;
  console.log("出发请求");
};
defineExpose({
  getGuess,
});
</script>

<style lang="scss" scoped>
.guess-container {
  width: 100%;
  display: flex;
  flex-direction: column;

  .guess-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20rpx;
    padding: 20rpx;
    .guess-item {
      padding: 20rpx;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;
      .guess-item-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 设置显示的行数 */
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        line-height: 1.5em; /* 确保行高一致 */
        max-height: 3em; /* 最大高度应为行高 * 行数 */
      }
    }
  }
}
</style>
